<template>
  <el-drawer v-model="dialogVisible" :title="drawerType ? '新增小区' : '编辑小区'">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm2"
    >
      <el-form-item label="小区名称：" prop="communityName">
        <el-input v-model="ruleForm.communityName" placeholder="请输入小区名称" />
      </el-form-item>
      <el-form-item label="市：" prop="city">
        <el-input v-model="ruleForm.city" placeholder="请输入市" />
      </el-form-item>
      <el-form-item label="区：" prop="area">
        <el-input v-model="ruleForm.area" placeholder="请输入小区地址" />
      </el-form-item>
      <el-form-item label="小区地址：" prop="communityAddress">
        <el-input v-model="ruleForm.communityAddress" placeholder="请输入区" />
      </el-form-item>
      <el-form-item label="定位：" prop="position">
        <el-input v-model="ruleForm.position" placeholder="请输入定位" />
      </el-form-item>
      <el-form-item label="状态：" v-if="!drawerType">
        <el-switch
          inline-prompt
          active-text="启用"
          inactive-text="禁用"
          v-model="ruleForm.status"
        />
      </el-form-item>
      <el-form-item label="备注：" prop="remark">
        <el-input v-model="ruleForm.remark" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submit(ruleFormRef)">确定</el-button>
      </span>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
  import { ref, reactive, nextTick } from 'vue'
  import type { FormInstance } from 'element-plus'
  import {
    postCommunityCreate,
    putCommunityUpdate,
  } from '@/api/controller/community-controller/index'
  import { ElMessage } from 'element-plus'
  const ruleFormRef = ref<FormInstance>()
  const drawerType = ref(true)
  const ruleForm = ref<any>({
    communityName: null,
    city: null,
    area: null,
    communityAddress: null,
    position: null,
    remark: null,
    status: false,
  })

  const rules = reactive({
    communityName: [
      { required: true, message: '请输入小区名称', trigger: 'blur' },
      { min: 0, max: 64, message: '长度不超过64个字符', trigger: 'blur' },
    ],
    city: [
      { required: true, message: '请输入市', trigger: 'blur' },
      { min: 0, max: 64, message: '长度不超过64个字符', trigger: 'blur' },
    ],
    area: [
      { required: true, message: '请输入区', trigger: 'blur' },
      { min: 0, max: 64, message: '长度不超过64个字符', trigger: 'blur' },
    ],
    communityAddress: [
      { required: true, message: '请输入小区地址', trigger: 'blur' },
      { min: 0, max: 64, message: '长度不超过64个字符', trigger: 'blur' },
    ],
    position: [{ min: 0, max: 64, message: '长度不超过64个字符', trigger: 'blur' }],
    remark: [{ min: 0, max: 64, message: '长度不超过64个字符', trigger: 'blur' }],
  })
  const dialogVisible = ref(false)
  //新增或修改
  const submit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid) => {
      if (valid) {
        if (drawerType.value) {
          const result = await postCommunityCreate(ruleForm.value, { loading: true })
          if (result.code === 200) {
            dialogVisible.value = false
            await emit('getData')
            ElMessage.success('添加成功')
          }
        } else {
          const result = await putCommunityUpdate(ruleForm.value, { loading: true })
          if (result.code === 200) {
            dialogVisible.value = false
            await emit('getData')
            ElMessage.success('修改成功')
          }
        }
      } else {
        ElMessage.warning('请正确填写表单')
        return false
      }
    })
  }
  const show = (data) => {
    if (data) {
      ruleForm.value = JSON.parse(JSON.stringify(data))
      drawerType.value = false
    } else {
      drawerType.value = true
      ruleForm.value = {
        communityName: null,
        city: null,
        area: null,
        communityAddress: null,
        position: null,
        remark: null,
        status: false,
      }
    }
    dialogVisible.value = true
    nextTick(() => {
      ruleFormRef.value.clearValidate()
    })
  }

  const emit = defineEmits(['getData'])
  defineExpose({
    show,
  })
</script>
